Cette page regroupe le template HTML/CSS pour la création du portofolio pour le cours STIC.
Zip du template téchargable ici
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Portfolio - Votre Nom</title> <link href="https://fonts.googleapis.com/css2?family=Michroma&display=swap" rel="stylesheet"> <link rel="stylesheet" href="style.css"> <link rel="icon" href="votre-photo.jpg" /> </head> <body class="dark-mode"> <div class="welcome-message" id="welcomeMessage"> Bienvenue sur le portfolio de <strong>[Votre Nom]</strong> 👋 </div> <video class="background-video" src="votre-video.mp4" autoplay muted loop playsinline></video> <div class="avatar-section"> <div class="avatar-fixed"> <div class="avatar-box"> <img src="votre-photo.jpg" alt="Portrait" class="avatar-img"> </div> </div> <img src="music.png" alt="Lancer ou arrêter la musique" class="music-button" id="musicBtn" /> <button class="theme-toggle" id="themeToggle">🌙</button> </div> <div class="boxes-container"> <div class="circle-box"> <h2>STIC</h2> <h4>Exercice 1</h4> <a href="#">Page personnelle</a> <a href="#">Page Wiki</a> <a href="#">Rapport Exercice 1</a> <h4>Exercice 2</h4> <a href="#">Flashcard</a> <a href="#">Rapport Exercice 2</a> <a class="tuto" href="#">Template HTML/CSS</a> </div> <div class="circle-box"><span>ADID</span></div> <div class="circle-box"><span>VIP</span></div> <div class="circle-box"><span>ERGO</span></div> <div class="circle-box"><span>Méthodes</span></div> <div class="circle-box"><span>Base</span></div> </div> <div class="single-box"> <div class="circle-box"> <h2>Portfolio</h2> <h4>[Votre Nom]</h4> <p>Bienvenue sur ma page portfolio, ici vous pouvez voir mes travaux en lien avec le Master MALTT.</p> <p class="tm">Vous pouvez librement réutiliser ce template HTML/CSS.</p> </div> </div> <button id="scrollTopBtn" title="Retour en haut">↑</button> <audio id="bleach" loop> <source src="votre-musique.mp3" type="audio/mp3"> </audio> <script> const music = document.getElementById('bleach'); const musicBtn = document.getElementById('musicBtn'); const themeToggle = document.getElementById('themeToggle'); const scrollBtn = document.getElementById('scrollTopBtn'); const welcome = document.getElementById('welcomeMessage'); const boxes = document.querySelectorAll('.circle-box'); let isPlaying = false; // Lecture / pause musique musicBtn.addEventListener('click', () => { if (!isPlaying) { music.play(); musicBtn.classList.add('playing'); isPlaying = true; } else { music.pause(); musicBtn.classList.remove('playing'); isPlaying = false; } }); // Mode sombre / clair themeToggle.addEventListener('click', () => { document.body.classList.toggle('light-mode'); document.body.classList.toggle('dark-mode'); }); // Animation apparition boxes const observer = new IntersectionObserver(entries => { entries.forEach(entry => { if (entry.isIntersecting) entry.target.classList.add('visible'); }); }, { threshold: 0.2 }); boxes.forEach(box => observer.observe(box)); // Bouton retour en haut window.addEventListener('scroll', () => { scrollBtn.style.display = (window.scrollY > 50) ? 'block' : 'none'; }); scrollBtn.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' })); // Message de bienvenue window.addEventListener('load', () => { welcome.classList.add('show'); setTimeout(() => welcome.classList.remove('show'), 4000); }); </script> </body> </html>
/* ===================== Reset et base ===================== */ html, body { margin: 0; padding: 0; width: 100%; height: 100%; font-family: 'Michroma', sans-serif; scroll-behavior: smooth; } /* ===================== Vidéo de fond ===================== */ .background-video { position: fixed; top: 50%; left: 50%; width: 100vw; height: 100vh; object-fit: cover; transform: translate(-50%, -50%); z-index: -1; } /* ===================== Message de bienvenue ===================== */ .welcome-message { position: fixed; top: 5vh; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.6); color: white; font-size: clamp(1rem, 2vw, 1.5rem); padding: clamp(0.5em, 1vw, 1em) clamp(1em, 2vw, 2em); border-radius: 1em; opacity: 0; transition: opacity 1s ease; z-index: 500; } .welcome-message.show { opacity: 1; } /* ===================== Avatar section ===================== */ .avatar-section { display: flex; align-items: center; justify-content: flex-end; gap: 2vw; padding: 0 2vw; } .avatar-fixed { position: fixed; top: 4.5vh; right: 1vw; z-index: 100; } .avatar-box { width: clamp(15em, 20vw, 20em); aspect-ratio: 1 / 1; border-radius: 100em; overflow: hidden; background: rgba(225, 225, 225, 0.7); border: 0.1em solid rgba(135, 14, 38, 0.7); box-shadow: 0 0 1.5em rgba(135,14,38,0.7); display: flex; justify-content: center; align-items: center; transition: transform 0.3s ease, box-shadow 0.3s ease; } .avatar-box:hover { transform: scale(1.05); box-shadow: 0 0 2em rgba(255,2,103,0.7); } .avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 0.6em; } /* ===================== Bouton musique ===================== */ .music-button { width: clamp(2em, 4vw, 2.5em); cursor: pointer; transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease; position: relative; z-index: 300; } .music-button:hover { transform: scale(1.2); filter: brightness(1.3); } .music-button.playing { animation: pulse 1.5s infinite ease-in-out; } @keyframes pulse { 0%,100%{ transform: scale(1); filter: brightness(1); } 50%{ transform: scale(1.15); filter: brightness(1.3); } } /* ===================== Bouton mode sombre/clair ===================== */ .theme-toggle { background: rgba(135,14,38,0.7); border: none; font-size: clamp(0.8em,2vw,1em); cursor: pointer; padding: clamp(0.2em,0.5vw,0.4em) clamp(0.4em,1vw,0.6em); border-radius: 0.3em; color: rgba(135,14,38,0.7); transition: all 0.3s ease, box-shadow 0.3s ease; z-index: 300; position: fixed; top: 4.5vh; right: clamp(18vw, 20vw, 22vw); } .theme-toggle:hover { transform: scale(1.2); box-shadow: 0 0 1.2em rgba(135,14,38,0.7); } /* ===================== Boxes ===================== */ .boxes-container { display: grid; grid-template-columns: repeat(3, clamp(2em,15vw,12em)); column-gap: clamp(8em,2vw,2.5em); row-gap: clamp(0.5em,1vw,1.5em); margin: 5vh auto 10vh auto; justify-content: center; width: 90%; position: relative; transform: translateX(-17%); } .circle-box { width: clamp(12em,20vw,15em); aspect-ratio:1/1; border-radius:10%; background-color: rgba(0,0,0,0.3); color:white; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding: clamp(0.5em,1vw,1em); box-shadow:0 0 clamp(0.5em,1vw,1em) rgba(0,0,0,0.7); overflow:hidden; font-size:clamp(0.7em,1.5vw,1em); transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; opacity: 0; transform: translateY(20%); } .circle-box.visible { opacity: 1; transform: translateY(0); } .circle-box:hover { transform: scale(1.05); box-shadow: 0 0 4em rgba(255,2,103,0.7); } .circle-box h2, .circle-box h4, .circle-box span, .circle-box p, .circle-box a { margin: 0.2em 0; font-size: inherit; text-decoration: none; color: white; transition: color 0.2s ease; } .circle-box a:hover, .circle-box span:hover { color: #ff0267; cursor: pointer; } .circle-box a.tuto { color: red; font-weight: bold; text-decoration: underline; } .circle-box p.tm { color: red; font-weight: bold; } /* ===================== Mode sombre/clair ===================== */ body.dark-mode .circle-box { background-color: rgba(33, 32, 32, 0); color: black; } body.light-mode .circle-box { background-color: rgb(0, 0, 0); color: black; } /* ===================== Single box ===================== */ .single-box { position: fixed; bottom: 5vh; right: 3vw; width: clamp(16em,16vw,10em); aspect-ratio: 1/1; color: rgba(135,14,38,0.7); } /* ===================== Scroll top ===================== */ #scrollTopBtn { position: fixed; bottom: 5vh; right: 2vw; font-size: clamp(1.5em,3vw,2em); display: none; background: rgba(255,255,255,0.2); border: none; padding: 0.5em 1em; border-radius: 1em; cursor: pointer; z-index: 400; transition: all 0.3s ease; } #scrollTopBtn:hover { background: rgba(255,255,255,0.4); } /* ===================== Responsive ===================== */ @media (max-width: 768px) { .avatar-section { justify-content: center; margin: 5vh auto; gap: 4vw; } .avatar-fixed { position: static; } .avatar-box { width: clamp(35vw,45vw,55vw); aspect-ratio: 1/1; border-radius: 50%; } .music-button { position: relative; width: clamp(8vw,10vw,12vw); z-index: 300; } .boxes-container { display: flex; flex-direction: column; align-items: center; width: 90%; margin: 6vh auto; transform: none; row-gap: 5vh; } .circle-box { width: 85vw; aspect-ratio: auto; padding: 4vw; font-size: clamp(1rem,3vw,1.3rem); } .single-box { position: static; width: 90vw; margin: 5vh auto; } .theme-toggle { position: static; transform: none; width: auto; margin-left: 0; font-size: clamp(0.8em,4vw,1em); } }
.png)